<template>
    <view class="container">
        <!-- <view class="title" @click="onPhoto">拍照搜题</view>
        <image v-if="imageSrc" :src="imageSrc" mode="aspectFit"></image> -->

        <!-- <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera> -->
        <!--  :customStyle="{width: '45%', borderRadius: '24rpx'}" -->
        <u-popup :show="show" @close="onClose" mode="bottom">
            <view style="height:88vh;overflow: auto; background-color: #F9F9F9;">
                <view style="background: #fff;padding: 40rpx;">
                    <view
                        style="background: #F9F9F9;display: flex;justify-content: space-between;align-items: center;padding: 20rpx;border-radius: 20rpx">
                        <text class="examItemText" style="width: 90%;">{{ itemtext }}</text>

                        <u-icon name="camera" color="#37B874" size="28"></u-icon>
                    </view>
                    <!-- <view style="display: flex;align-items: center;margin-top: 30rpx;justify-content: center;">
                        <u-icon name="info-circle" color="#FF9D00" size="24"></u-icon>
                        <text style="margin-left: 8rpx;">如果结果不匹配，可<text
                                style="border-bottom: 1px solid #37B874;color: #37B874;">上传试题文档</text>获取答案</text>
                    </view> -->
                </view>
                <view style="background: #fff; margin-top: 40rpx;padding: 40rpx;">
                    <u-tabs :list="list1" @click="click" lineColor="#37B874"></u-tabs>
                    <view v-for="(showQuestion, index) in screenData" :key="index" style="margin-top: 40rpx;">
                        <text
                            style="border: 1px solid #37B874;border-radius: 20px 20px 20px 0;padding: 5rpx 15rpx;background-color: #F3FBF7;display:inline-block;margin:2px 5px 40rpx 0">{{
                                onChangeDict(showQuestion.type,
                                    mapDictCodesData.allQuestionType) }}</text>
                        <view style="border-radius: 10rpx;  padding-top: 10rpx;">
                            <view class="questionText"
                                :style="{ fontSize: fontSize + 'rpx', lineHeight: (fontSize + 12) + 'rpx', display: 'flex', flexDirection: 'row', overflow: 'auto' }">
                                <!-- <u-parse :content="showQuestion.itemText"></u-parse> -->
                                <rich-text :nodes="showQuestion.itemText"></rich-text>
                            </view>


                        </view>
                        <RadioQuestion
                            v-if="['判断题', '单选题'].includes(showQuestion.itemTypeName) || ['0101', '0201'].includes(showQuestion.type)"
                            :showQuestion="showQuestion" :selectAnswer="showQuestion.type" :windowHeight="windowHeight"
                            :fontSize="fontSize" :showAnalysis="showQuestion.stuAnswer" flag="true"></RadioQuestion>
                        <CheckBoxQuerstion
                            v-else-if="(showQuestion.itemTypeName === '多选题' || ['0301'].includes(showQuestion.type) && showQuestion.selections)"
                            :showQuestion="showQuestion" :selectAnswer="showQuestion.type" :windowHeight="windowHeight"
                            :fontSize="fontSize" :showAnalysis="showQuestion.stuAnswer" flag="true"></CheckBoxQuerstion>
                        <view v-else-if="['简答题', '填空题', '计算题', '论述题', '绘图题'].includes(showQuestion.itemTypeName)"
                            :style="{ overflow: 'auto', marginTop: '30rpx' }" flag="true">
                            <view class="questionTextItem">
                                <u--textarea v-model="selectAnswer" disabled placeholder="请输入答案" autoHeight
                                    border="bottom"></u--textarea>
                            </view>
                        </view>

                        <view
                            style="background: linear-gradient(180deg, #FBFFFB 0%, #F6FFF7 100%);border-radius: 12px;display: flex;align-items: center;padding:20rpx 40rpx;margin-top: 40rpx;justify-content: space-between;">
                            <view style="width: 80%;" class="examItemText">
                                正确答案：
                                <text style="color: #37B874;margin-right: 20rpx">
                                    {{ showQuestion.answer }}
                                    <!-- <rich-text :nodes="showQuestion.answer"></rich-text> -->
                                </text>
                            </view>

                            <text
                                style="color: #fff;padding: 8rpx 20rpx;background-color: #37B874;border-radius: 30rpx;"
                                @click="copyText(showQuestion.answer)">复制</text>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import CheckBoxQuerstion from '../pages/common/CheckBoxQuerstion.vue';
import RadioQuestion from '../pages/common/RadioQuestion.vue';
import { upPictureToItem } from '../services/QuestionBankService';
import { mapDictCodes } from '../services/ServerService';
import { getArrObjectByProperty, getBase64, notificationFun } from '../utils/PrjUtils';

export default {
    components: {
        RadioQuestion,
        CheckBoxQuerstion,
    },
    data() {
        return {
            imageSrc: '',
            show: false,
            screenData: [], // 筛选数据
            defaultData: [], // 全部数据
            mapDictCodesData: {},
            itemtext: '',
            list1: [
                // {
                //     name: '判断题',
                //     value: '0101',
                // },
                // {
                //     name: '单选题',
                //     value: '0201',
                // },
            ],
        }
    },
    onLoad() {
        this.onMapDictCodes()
        this.onPhoto()
    },
    methods: {
        onMapDictCodes() {
            mapDictCodes('allQuestionType').then(res => {
                this.mapDictCodesData = res
            })
        },
        onChangeDict(val, dict) {
            console.log(val, 'vallllll');

            if (dict) {
                return getArrObjectByProperty(dict, 'value', val)?.label || ''
            }
        },
        onPhoto() {
            uni.chooseImage({
                count: 1, // 选择一张图片 
                sourceType: ['camera'], // 仅允许拍照 
                success: (res) => {
                    console.log(res.tempFilePaths[0]);
                    console.log(res);

                    this.imageSrc = res.tempFilePaths[0];
                    getBase64(res.tempFilePaths[0], (base64) => {
                        console.log(base64);
                        this.show = true
                        upPictureToItem({ base64 }).then(res => {
                            console.log(res);
                            this.itemtext = res.itemText
                            this.defaultData = res.items
                            res.items.forEach(item => {
                                item.itemText = item.itemText.replace(
                                    /<em>/g,
                                    '<em style="color: red;">'
                                )
                            })
                            this.screenData = res.items
                            console.log(this.mapDictCodesData, 'this.mapDictCodes.allQuestionType');

                            let arr = this.mapDictCodesData.allQuestionType.filter(item => res.types.includes(item.value))
                            console.log(arr, 'arr');
                            arr.forEach(item => {
                                item.name = item.label
                            })
                            arr.unshift({
                                name: '全部',
                                value: ''
                            })
                            this.list1 = arr

                        })
                    });
                }
            });
            // uni.chooseImage({
            //     count: 1,
            //     sourceType: ['camera'],
            //     success: (res) => {
            //         // console.log(res);
            //         // 图片信息：res.tempFilePaths 
            //         // 获取图片路径在页面上预览图片
            //         this.imageSrc = res.tempFilePaths[0]
            //         // 在这里可以对拍照的照片进行处理，例如上传至服务器或保存至本地console.log(tempFilePaths)
            //         console.log('成功');
            //     }
            // })
        },
        uploadImage(filePath) {
            uni.uploadFile({
                url: 'https://example.com/upload',  // 替换为你的服务器上传接口 
                filePath: filePath,
                name: 'file', // 文件对应的 key, 开发者在服务器端通过这个 key 可以获取到文件二进制内容 
                formData: {
                    'user': 'test' // 其他额外的 form data 
                },
                success: (uploadRes) => {
                    console.log(' 上传成功', uploadRes);
                    uni.showToast({
                        title: '上传成功',
                        icon: 'success'
                    });
                },
                fail: (err) => {
                    console.error(' 上传失败', err);
                    uni.showToast({
                        title: '上传失败',
                        icon: 'none'
                    });
                }
            });
        },
        click(item) {
            // this.value = item.value
            console.log('item', item, this.defaultData);
            this.screenData = item.value ? this.defaultData.filter(ite => ite.type === item.value) : this.defaultData
        },
        onClose() {
            this.show = false
            this.onPhoto()
        },
        // 复制
        copyText(text) {
            // let text = '要复制的文本内容';
            uni.setClipboardData({
                data: text,
                showToast: false,
                success: () => {
                    notificationFun('复制成功')
                    // uni.getClipboardData({
                    //     success: (res) => {
                    //         // console.log('复制成功，剪贴板中的内容：' + res.data);
                    //         notificationFun('复制成功')
                    //     },
                    //     fail: (err) => {
                    //         // console.error('复制失败：', err);
                    //         notificationFun('复制失败')
                    //     }
                    // });
                },
                fail: (err) => {
                    // console.error('设置剪贴板失败：', err);

                }
            });
        }
    },
    onShow() {
        // uni.navigateBack({
        //     delta: 1 // 默认值是1，表示返回的页面层数
        // });
    },

}
</script>

<style lang="scss" scoped>
page {
    background: #ffffff !important;

    .examItemText {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; //设置超出几行省略内容
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

em {
    color: red !important;
    /* 设置颜色为红色 */
}

</style>